import React, { Component } from 'react'
import { Layout, Menu } from 'antd';
import { withRouter } from 'react-router-dom'
import { NotificationOutlined } from '@ant-design/icons';
import axios from 'axios'
const { Sider } = Layout;
const { SubMenu } = Menu;
class sideMenu extends Component {
    state = {
        collapsed: false,
        mumeList:[]
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };
    componentDidMount() {
        this.getMumeList()
    }
    getMumeList() {
        axios.get('http://localhost:8000/right?_embed=children').then(res => {
            console.log(res)
            this.setState({
                mumeList :res.data
            })
        })
    }
    render() {
        // const mumeList = [
        //     {
        //         key: "/home",
        //         title: "首页",
        //         ico: ,
        //     },
        //     {
        //         key: "/user-manage/lis",
        //         title: "用户管理",
        //         ico: <NotificationOutlined />,
        //     },
        //     {
        //         key: "/right-manage",
        //         title: "角色管理",
        //         ico: <NotificationOutlined />,
        //         children: [
        //             {
        //                 key: "/right-manage/role/list",
        //                 title: "角色列表",
        //                 ico: <NotificationOutlined />,
        //             },
        //             {
        //                 key: "/right-manage/right/list",
        //                 title: "权限列表",
        //                 ico: <NotificationOutlined />,
        //             },
        //         ]
        //     },
        // ]
        const rederMenu = (menuList) => {
            console.log("menuList", menuList)
            return menuList.map(item => {
                if (item.children) {
                    return <SubMenu key={item.key} icon={<NotificationOutlined />} title={item.title}>
                        {rederMenu(item.children)}
                    </SubMenu>
                }
                return <Menu.Item icon={<NotificationOutlined />} key={item.key} onClick={() => {
                    console.log(this.props)
                    this.props.history.push(item.key)
                }}>{item.title}</Menu.Item>
            })
        }
        return (
            <div>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed} style={{ height: "100%" }}>
                    <div className="logo" />
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                        {rederMenu(this.state.mumeList)}
                    </Menu>
                </Sider>
            </div>
        )
    }
}
export default withRouter(sideMenu)